<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>feGaussianBlur</title>
  </head>
  <body>
    <svg
      width="100"
      height="100"
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <filter id="f1" x="0" y="0" width="100" height="100">
          <!-- in="SourceGraphic" 部分定义了效果是为整个元素创建的 -->
          <!-- stdDeviation 属性定义了模糊的程度 -->
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        </filter>
      </defs>
      <rect
        x="0"
        y="0"
        width="100"
        height="100"
        style="fill: yellow"
        filter="url(#f1)"
      />
    </svg>
  </body>
</html>
